/* =========================================================
   Outcome Explore block ("Explore More Proven Outcomes" + services row)
   File: wwwroot/css/outcome-explore.css
   Used by: Views/Partials/blocklist/Components/outcomeExploreBlock.cshtml
   Fluid layout — same scaling as the other Outcome blocks.
   ========================================================= */

.oc-exp {
  box-sizing: border-box;
  --oc-navy: #13204a;
  --oc-orange: #f58a2e;
  --oc-orange-link: #ff9a45;
  --oc-line: #e6e8ec;
  --oc-gutter: 6.8vw;

  width: 100%;
  background: #fff;
  padding: clamp(36px, 3.1vw, 80px) var(--oc-gutter) clamp(36px, 3.1vw, 80px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--oc-navy);
  -webkit-font-smoothing: antialiased;
}
.oc-exp *, .oc-exp *::before, .oc-exp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.oc-exp h2 {
  font-weight: 600;
  font-size: clamp(22px, 2vw, 52px);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oc-navy);
}
.oc-exp h2 span { color: var(--oc-orange-link); }

/* ---------- CARDS ---------- */
/* .oc-exp__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 56px);
  margin-top: clamp(20px, 2.4vw, 62px);
  list-style: none;
} */
.oc-exp__cards {
  display: grid;
  grid-auto-flow: column;                 /* every card goes in one row */
  grid-auto-columns: minmax(0, 1fr);      /* the cards share the width equally */
  gap: clamp(16px, 2.2vw, 56px);
  margin-top: clamp(20px, 2.4vw, 62px);
  list-style: none;
}
.oc-exp__card {
  background: linear-gradient(90deg, #fcece3 0%, #ebe6ee 55%, #d9e0fb 100%);
  padding: clamp(22px, 2.2vw, 56px);
  min-height: clamp(180px, 16.2vw, 420px);
  transition: box-shadow .25s ease, transform .25s ease;
}
.oc-exp__card:hover {
  box-shadow: 0 12px 30px rgba(19, 32, 74, .08);
  transform: translateY(-3px);
}

.oc-exp__badge {
  display: inline-block;
  border: 1px solid var(--oc-orange);
  color: var(--oc-orange);
  font-size: clamp(10px, 0.73vw, 19px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.65em 0.95em;
  border-radius: 3px;
  margin-bottom: clamp(14px, 1.45vw, 38px);
}
.oc-exp__card h3 {
  font-weight: 600;
  font-size: clamp(17px, 1.46vw, 38px);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oc-navy);
  margin-bottom: clamp(12px, 1.5vw, 38px);
}
.oc-exp__text {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 0.9vw, 23px);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 40vw;
}
.oc-exp__link {
  display: inline-block;
  margin-top: clamp(10px, 1vw, 26px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 0.9vw, 23px);
  font-weight: 600;
  color: var(--oc-orange-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oc-exp__link:hover { color: var(--oc-navy); }

/* ---------- SERVICES ROW ---------- */
.oc-exp__services {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 2.5vw, 64px);
  margin-top: clamp(20px, 2vw, 52px);
  padding-top: clamp(20px, 2.2vw, 56px);
  border-top: 1px solid var(--oc-line);
}
.oc-exp__services-label {
  font-size: clamp(11px, 0.9vw, 23px);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--oc-navy);
}
.oc-exp__services a {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 1vw, 26px);
  font-weight: 500;
  color: var(--oc-orange-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.oc-exp__services a:hover { color: var(--oc-navy); }
.oc-exp a:focus-visible { outline: 2px solid var(--oc-navy); outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .oc-exp { --oc-gutter: 24px; }
  /* .oc-exp__cards { grid-template-columns: 1fr; } */
    .oc-exp__cards { grid-auto-flow: row; grid-template-columns: 1fr; }
  .oc-exp__card { min-height: 0; }
  .oc-exp__text { max-width: none; }
  .oc-exp__services { justify-content: flex-start; }
  .oc-exp__services-label { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .oc-exp { --oc-gutter: 20px; }
  .oc-exp__services { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-exp__card { transition: none; }
  .oc-exp__card:hover { transform: none; }
}